<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的待办事项</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            font-size: 18px;
            color: #555;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f9f9f9;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .completed {
            background-color: #d4edda;
        }
        button {
            padding: 5px 10px;
            cursor: pointer;
            border: none;
            border-radius: 3px;
            background-color: #ff4d4d;
            color: white;
        }
    </style>
</head>
<body>
    <h1>我的待办事项</h1>
    <p id="currentTime">当前时间：</p>
    <button onclick="addTodo()">添加待办事项</button>
    <ul id="todoList"></ul>

    <script>
        // 更新当前时间
        function updateTime() {
            const now = new Date();
            document.getElementById('currentTime').textContent = '当前时间：' + now.toLocaleTimeString();
        }

        setInterval(updateTime, 1000);
        updateTime();

        // 添加待办事项
        function addTodo() {
            const todoText = prompt("请输入新的待办事项：");
            if (todoText) {
                const li = document.createElement('li');
                li.textContent = todoText;

                // 添加删除按钮
                const deleteBtn = document.createElement('button');
                deleteBtn.textContent = "X";
                deleteBtn.onclick = () => li.remove();

                // 添加点击事件，切换完成状态
                li.onclick = () => {
                    li.classList.toggle('completed');
                };

                li.appendChild(deleteBtn);
                document.getElementById('todoList').appendChild(li);
            }
        }
    </script>
</body>
</html>